import React, { ReactElement, useState } from 'react';

// 引入 antd
import { Form, Input, Button, Radio, Upload, message } from 'antd';

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

// 引入 样式
import styles from './index.less';

// 引入 api
import { addShop } from '@/api/applt';

interface Props {}

// 图片上传
function getBase64(img: any, callback: any) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

export default function index({}: Props): ReactElement {
  const [loading, setLoading] = useState<boolean>(false);
  const [imageUrl, setImageUrl] = useState<any>();

  const [loading1, setLoading1] = useState<boolean>(false);
  const [imageUrl1, setImageUrl1] = useState<any>();

  const onFinish = async (values: any) => {
    const { idCardImg, licenceImg } = values;
    const obj = values;
    obj.idCardImg = idCardImg?.response?.data[0];
    obj.licenceImg = licenceImg?.response?.data[0];
    const res = await addShop(obj);
    if (res.status === 200) {
      message.success('店铺添加成功，等待审核');
    } else {
      message.error('店铺添加失败，请重新添加');
    }
    window.location.href = '/login';
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  // 图片上传
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  const uploadButton1 = (
    <div>
      {loading1 ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  const handleChange = (info: any) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (imageUrl: any) => {
        setLoading(false);

        setImageUrl(imageUrl);
      });
    }
  };

  const handleChange1 = (info: any) => {
    if (info.file.status === 'uploading') {
      setLoading1(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, (imageUrl1: any) => {
        setLoading1(false);
        setImageUrl1(imageUrl1);
      });
    }
  };

  return (
    <div className={styles.container}>
      <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
        <Form.Item
          label="店铺类型"
          name="type"
          rules={[{ required: true, message: '请选择店铺类型 ！' }]}
        >
          <Radio.Group>
            <Radio value={0}>店铺</Radio>
            <Radio value={1}>其他</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item
          label="店铺名："
          name="shopName"
          rules={[{ required: true, message: '请输入店铺名 ！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="手机号："
          name="tel"
          rules={[{ required: true, message: '请输入手机号 ！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="店铺地址："
          name="address"
          rules={[{ required: true, message: '请输入店铺地址 ！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="注册人："
          name="managerName"
          rules={[{ required: true, message: '请填写店铺地址 ！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="身份证号："
          name="idCard"
          rules={[{ required: true, message: '请输入身份证号 ！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="身份证照片："
          name="idCardImg"
          rules={[{ required: true, message: '请上传身份证 “正面” 照片 ！ ' }]}
        >
          <Upload
            name="file"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="http://47.98.128.191:3000/images/uploadImages"
            onChange={handleChange}
          >
            {imageUrl ? (
              <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
            ) : (
              uploadButton
            )}
          </Upload>
        </Form.Item>

        <Form.Item
          label="营业执照编号："
          name="licenceNo"
          rules={[{ required: true, message: '请填写正确的营业执照编号 ！' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="营业执照照片："
          name="licenceImg"
          rules={[{ required: true, message: '请上传营业执照照片 ！' }]}
        >
          <Upload
            name="file"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="http://47.98.128.191:3000/images/uploadImages"
            onChange={handleChange1}
          >
            {imageUrl1 ? (
              <img src={imageUrl1} alt="avatar" style={{ width: '100%' }} />
            ) : (
              uploadButton1
            )}
          </Upload>
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            添加店铺
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
